<!-- 车机异动 -->
<template>
  <a-modal
    :visible="visible"
    @cancel="onClose"
    :title="pageTlt"
    :mask-closable="false"
    :align-center="false"
    class="modal-dialog-wrapper"
    unmount-on-close
    top="30px"
    width="85vw"
    okText="确认"
  >
    <div style="max-height: 85vh">
      <a-tabs v-model="activeTabsKey" default-active-key="1" @change="tabsChangeFn">
        <a-tab-pane key="1" title="待处理" />
        <a-tab-pane key="2" title="处理记录" />
      </a-tabs>
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
      <table-index :table="table" :rowKey="`id`" @loadData="loadData">
        <template #vehicleInfo="{ record }">
          <div class="car-msg">
            <div class="car-msg-left">
              <div class="col-text col-lic"> 设备类型：{{ record.vehicleTypeStr || '-' }} </div>
              <div class="col-text"> 设备品牌：{{ record.vehicleFirm || '-' }} </div>
              <div class="col-text">设备型号：{{ record.vehicleModelStr || '-' }}</div>
              <div class="col-text">供应商：{{ record.supplierName || '-' }}</div>
            </div>
          </div>
        </template>
        <template #carInfo="{ record }">
          <div class="car-msg">
            <div class="car-msg-left">
              <div class="col-text col-lic"> 车牌：{{ record.licenseNo || '-' }} </div>
              <div class="col-text"> 车型：{{ record.modelName || '-' }} </div>
            </div>
          </div>
        </template>
        <template #handlerUserName="{ record }">
          <div class="car-msg">
            <div class="car-msg-left">
              <div class="col-text"> {{ record.handlerUserName || '-' }} </div>
              <div class="button-border margin-l-8" @click="handleReason(record)">处理原因</div>
            </div>
          </div>
        </template>
        <template #operate="{ record }">
          <div class="car-msg">
            <div class="car-msg-left">
              <a
                v-permission="'svms:index:operation:movementhandle'"
                class="operate-button"
                type="text"
                size="small"
                @click="onhandle(record)"
              >
                处理
              </a>
            </div>
          </div>
        </template>
      </table-index>
    </div>
    <template #footer>
      <a-button @click="onClose">关闭</a-button>
    </template>
  </a-modal>
  <handle ref="operatehandle" :status="queryParam.handlerStatus" @conform="handleconform" />
</template>

<script setup name="carmodal">
  import { ref, reactive, computed } from 'vue'
  import {
    getCarVehicleAbnormalMovementList,
    getCarVehicleAbnormalMovementHandle,
    exportAbnormalMovementListExcel,
    exportAbnormalMovementListLogExcel,
  } from '@/api/workplace.js'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import handle from '../components/handle.vue'
  import { useExport } from '@/hooks/list'
  //查询条件
  let queryParam = reactive({
    handlerStatus: 0,
  })
  const searchList = computed(() => {
    return [
      {
        label: '所属门店',
        prop: 'siteId',
        type: 'remote-select',
        attrs: {
          type: 'site_listBystaff',
          popupContainer: '.modal-dialog-wrapper .remote-select-wrapper',
          params: {
            oldId: queryParam.siteId,
          },
        },
        change: (val, option) => {
          if (val) {
            queryParam.carId = ''
          }
        },
      },
      {
        label: '车牌号',
        prop: 'carId',
        type: 'remote-select',
        attrs: {
          type: 'car_licenseno_list',
          popupContainer: '.modal-dialog-wrapper .remote-select-wrapper',
          params: {
            siteId: queryParam.siteId,
          },
        },
      },
    ]
  })
  const operatehandle = ref('')
  const columns = reactive([
    {
      columns: [
        { title: 'ID', dataIndex: 'id', width: 70 },
        { title: '设备sn/id', dataIndex: 'vehicleNum', width: 100 },
        { title: '设备信息', dataIndex: 'vehicleInfo', slotName: 'vehicleInfo', width: 200 },
        { title: '车辆信息', dataIndex: 'carInfo', slotName: 'carInfo', width: 200 },
        { title: '所属门店', dataIndex: 'siteName', width: 150 },
        { title: '当前位置', dataIndex: 'lastAddress', width: 150 },
        { title: '异动行驶里程(公里)', dataIndex: 'mileage', width: 150 },
        { title: '提醒时间', dataIndex: 'changeTime', width: 170 },
        { title: '操作', dataIndex: 'operate', slotName: 'operate', width: 60, fixed: 'right' },
      ],
      buttons: [
        {
          mode: 'import',
          label: '导出',
          method: () => handleExport(1),
        },
      ],
    },
    {
      columns: [
        { title: 'ID', dataIndex: 'id', width: 70 },
        { title: '设备编号', dataIndex: 'vehicleNum', width: 100 },
        { title: '设备信息', dataIndex: 'vehicleInfo', slotName: 'vehicleInfo', width: 200 },
        { title: '车辆信息', dataIndex: 'carInfo', slotName: 'carInfo', width: 200 },
        { title: '所属门店', dataIndex: 'siteName', width: 150 },
        { title: '当前位置', dataIndex: 'lastAddress', width: 150 },
        { title: '异动行驶里程(公里)', dataIndex: 'mileage', width: 150 },
        { title: '提醒时间', dataIndex: 'changeTime', width: 170 },
        { title: '处理人', dataIndex: 'handlerUserName', slotName: 'handlerUserName', width: 100 },
        { title: '处理时间', dataIndex: 'handlerTime', width: 170 },
      ],
      buttons: [
        {
          mode: 'import',
          label: '导出',
          method: () => handleExport(2),
        },
      ],
    },
  ])
  // 导出事件
  const handleExport = (way) => {
    if (way == 1) {
      useExport(exportAbnormalMovementListExcel, queryParam)
    } else {
      useExport(exportAbnormalMovementListLogExcel, queryParam)
    }
  }
  // 待处理 - table 配置
  const table = useTable({
    tableHeight: 'calc(100vh - 450px)',
    columns: columns[0].columns,
    buttons: columns[0].buttons,
  })
  // tabs 相关 开始
  const activeTabsKey = ref('1')
  const tabsChangeFn = (e) => {
    if (e === '1') {
      queryParam.handlerStatus = 0
      table.columns = columns[0].columns
      table.buttons = columns[0].buttons
    } else {
      queryParam.handlerStatus = 1
      table.columns = columns[1].columns
      table.buttons = columns[1].buttons
    }
    loadData()
  }

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarVehicleAbnormalMovementList)
  // modal展示
  const visible = ref(false)
  let pageTlt = ref('')
  const open = (label) => {
    pageTlt = label
    visible.value = true
    loadData(1)
  }
  const onClose = () => {
    visible.value = false
    queryParam.handlerStatus = 0
    queryParam.siteId = ''
    queryParam.carId = ''
    table.columns = columns[0].columns
  }
  //处理
  const handleconform = (form) => {
    getCarVehicleAbnormalMovementHandle({ ...form.value }).then((res) => {
      if (res.code === 200) {
        operatehandle.value.handleclose()
        loadData()
      }
    })
  }
  const onhandle = (record) => {
    operatehandle.value.open(record)
  }
  const handleReason = (item) => {
    operatehandle.value.open(item)
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .car-msg {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .car-msg-left {
    margin-right: 10px;
  }
  .col-lic {
    color: #1d2129;
    font-size: 14px;
    font-weight: 600;
    margin-right: 16px;
  }
  .button-border {
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
    padding: 0 7px;
    border: 1px solid #1890ff;
    color: #1890ff;
    font-size: 12px;
    word-break: keep-all;
  }
  .operate-button {
    width: 56px;
    display: inline-flex;
    align-items: center;
    line-height: 1.5715;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0, 0, 1, 1);
    user-select: none;
    height: 32px;
    font-size: 14px;
    border-radius: var(--border-radius-small);
    color: rgb(var(--primary-6));
  }
</style>
